<template>
  <group class="apply-info">
    <cell-box class="cellbox-item">
      <flexbox>
        <flexbox-item class="title" :span="3">
          <img :src="detailData.CreatedImage" class="header-img">
        </flexbox-item>
        <flexbox-item class="value" :span="9">
          <p class="name">{{detailData.CreatedNameCh}} {{detailData.CreatedNameEn}}</p>
          <my-apply-type :applyType="detailData.Type"></my-apply-type>
        </flexbox-item>
      </flexbox>
      <my-apply-status :applyStatus="detailData.Status"></my-apply-status>
    </cell-box>
    <cell-box class="cellbox-item" v-for="(item, index) in applyInfo" :key="index">
      <flexbox :class="{'image-cell': item.images && item.images.length > 0,'file-cell':item.files && item.files.length}">
        <flexbox-item class="title" :span="4" v-html="item.key + '：'">
        </flexbox-item>
        <flexbox-item class="value" :span="8">
          <div v-html="item.value === null ? '暂无消息' : item.value" :style="item.value === null ? 'color:#ddd;' : ''"></div>
          <ul v-if="item.images && item.images.length > 0" class="img-list">
            <li v-for="(imgSrc, index) in item.images" :key="index">
              <img :src="imgSrc" @click="ImagesShow(index)">
            </li>
          </ul>
          <ul v-if="item.files && item.files.length > 0" class="file-list">
            <li v-for="(file, index) in item.files" :key="index">
              <a :href="file" target="_blank">{{file.slice(file.indexOf("_")+1,file.length)}}</a>
            </li>
          </ul>
          <template v-if="item.images && item.images.length === 0">
            暂无上传图片
          </template>
          <template v-if="item.files && item.files.length === 0">
            暂无上传附件
          </template>
        </flexbox-item>
      </flexbox>
    </cell-box>
    <!-- 圖片放大 -->
    <previewer :list="previewerImagesList" ref="previewer"></previewer>
  </group>
</template>

<script>
  import convert, { zh } from 'cardinal-number';
  import { Group, CellBox, Flexbox, FlexboxItem, Previewer } from 'vux';
  import ApplyType from './ApplyType.vue';
  import ApplyStatus from './ApplyStatus.vue';
  export default {
    name: 'ApplyInfo',
    data () {
      return {
        // applyPerson: '',
        applyInfo: [],
        previewerImagesList: [], // Previewer組件所需格式
        previewerFileList:[] //
      };
    },
    props: ['detailData'],
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      Previewer,
      'my-apply-type': ApplyType,
      'my-apply-status': ApplyStatus
    },
    methods: {
      ImagesShow: function (index) {
        this.$refs.previewer.show(index);
      },
      // 轉換抄送人
      parseCopiers: function (copiersArr) {
        let copiersStr = '';
        copiersArr.forEach((item) => {
          if (item.NameCh === item.NameEn) {
            copiersStr += `${item.NameCh}<br />`;
          } else {
            copiersStr += `${item.NameCh} ${item.NameEn}<br />`;
          }
        });
        return copiersStr;
      },
      // 轉換請假分鐘
      parseAskLeaveMinute: function (minute, day) {
        let minuteStr = `${(minute/60).toFixed(2)}小时（共${day}天）`;
        return minuteStr;
      },
      parseAskLeaveType: function (keyId, otherType) {
        if (otherType !== '') {
          return `其他原因：${otherType}`;
        }
        let typeArr = this.getTypeKeyValue();
        let resultText = '';
        typeArr.forEach((item) => {
          if (item.KeyId === keyId) {
            resultText = item.ItemCode;
          }
        });
        return resultText;
      },
      getConfidential(isOwner,isClient,confidentialityReasons){
        var str = '';
        if(isOwner) str+='业主身份 '
        if(isClient) str+='客户身份 '
        if(confidentialityReasons) str+='成交资讯 '
        return str
      },
      parseParams: function () {
        let keyValueData;
          // this.detailData = info
        if (this.detailData.Type === 2) {
          // 合同申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [
            {
              key: '项目名称',
              value: this.detailData.Content.projectName
            }
          ];
          if (this.detailData.Content.remarks) {
            keyValueData.push({
              key: '备注',
              value: this.detailData.Content.remarks
            });
          }
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if (this.detailData.Content.Files) {
            keyValueData.push({
              key: '附件',
              value:'', 
              files:this.detailData.Content.Files
            });
          };
          if(copiersArr){
            keyValueData.push({
              key: '抄 送 人',
              value: copiersArr.length > 0 ? copiersArr : null
            });
          }
        } else if (this.detailData.Type === 1) {//请假申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [
            {
              key: '请假开始日期',
              value: this.detailData.Content.StartDate.replace(/T/g, ' ')
            },
            {
              key: '请假结束日期',
              value: this.detailData.Content.EndDate.replace(/T/g, ' ')
            },
            {
              key: '请假小时',
              value: this.parseAskLeaveMinute(this.detailData.Content.Minute, this.detailData.Content.Day)
            },
            {
              key: '请假原因',
              value: this.detailData.Content.Reason
            },
            {
              key: '请假类型',
              value: this.parseAskLeaveType(this.detailData.Content.Type, this.detailData.Content.Other)
            },
            {
              key: '上传图片',
              value: '',
              images: this.detailData.Content.Images
            },
            {
              key: '抄 送 人',
              value: copiersArr.length > 0 ? copiersArr : null
            }
          ];
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.EditApplyDateReason) {
            keyValueData.push({
              key: '缩短日期原因',
              value: this.detailData.Content.EditApplyDateReason
            });
          }
        } else if (this.detailData.Type === 3){//保密申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [];
          keyValueData.push({
            key: '业主/客戶名称',
            value: this.detailData.Content.clientName
          })          
          if (this.detailData.Content.company) {
            keyValueData.push({
              key: '所属公司',
              value: this.detailData.Content.company
            });
          }
          keyValueData.push({
            key: '公司电话',
            value: this.detailData.Content.telephone
          })          
          keyValueData.push({
            key: '手机号码',
            value: this.detailData.Content.areaCode + this.detailData.Content.mobilePhone
          })          
          if(this.detailData.Content.faxTelephone){
            keyValueData.push({
              key: '传真电话',
              value: this.detailData.Content.faxTelephone
            })          
          }
          if(this.detailData.Content.email){
            keyValueData.push({
              key: '电子邮箱',
              value: this.detailData.Content.email
            })          
          }
          keyValueData.push({
            key: '地址',
            value: this.detailData.Content.address
          })          
          keyValueData.push({
            key: '有关物业',
            value: this.detailData.Content.relatedProperties
          })          
          keyValueData.push({
            key: '楼盘编号',
            value: this.detailData.Content.PropertyID
          })          
          keyValueData.push({
            key: '保密资料',
            value: this.getConfidential(this.detailData.Content.isOwner,this.detailData.Content.isClient,this.detailData.Content.transactionInfo)
          })    
          keyValueData.push({
            key: '保密原因',
            value: this.detailData.Content.confidentialityReasons
          })          
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if(this.detailData.Content.remarks){
            keyValueData.push({
              key: '备注',
              value: this.detailData.Content.remarks
            })          
          }      
          if (this.detailData.Content.Files) {
            keyValueData.push({
              key: '附件',
              value:'', 
              files:this.detailData.Content.Files
            });
          }
          keyValueData.push({
            key: '抄 送 人',
            value: copiersArr.length > 0 ? copiersArr : null
          })  
        } else if (this.detailData.Type === 4){//密钥申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [];
          keyValueData.push({
            key: '房源编号',
            value: this.detailData.Content.PropertyID
          })
          keyValueData.push({
            key: '钥匙密码',
            value: this.detailData.Content.keyPassword
          })
          keyValueData.push({
            key: '业主名称',
            value: this.detailData.Content.clientName
          })
          keyValueData.push({
            key: '业主电话',
            value: this.detailData.Content.areaCode + this.detailData.Content.mobilePhone
          })
          if(this.detailData.Content.remarks){
            keyValueData.push({
              key: '备注',
              value: this.detailData.Content.remarks
            })
          }
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if(this.detailData.Content.Files) {
            keyValueData.push({
              key: '附件',
              value:'', 
              files:this.detailData.Content.Files
            });
          }
          if(copiersArr){
            keyValueData.push({
              key: '抄 送 人',
              value: copiersArr.length > 0 ? copiersArr : null
            });
          }
        } else if (this.detailData.Type === 5) {//例假申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [
            {
              key: '请假开始日期',
              value: this.detailData.Content.StartDate.replace(/T/g, ' ')
            },
            {
              key: '请假结束日期',
              value: this.detailData.Content.EndDate.replace(/T/g, ' ')
            },
            {
              key: '请假原因',
              value: this.detailData.Content.Reason
            },
            
            {
              key: '抄 送 人',
              value: copiersArr.length > 0 ? copiersArr : null
            }
          ];
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.EditApplyDateReason) {
            keyValueData.push({
              key: '缩短日期原因',
              value: this.detailData.Content.EditApplyDateReason
            });
          }
        } else if (this.detailData.Type === 6) {//付外佣申请
          let copiersArr = this.parseCopiers(this.detailData.Copiers);
          keyValueData = [
            {
              key: '申请日期',
              value: this.detailData.Content.StartDate.replace(/T/g, ' ').slice(0, 10)
            },
            {
              key: '收款单位',
              value: this.detailData.Content.PayCompany
            },
            {
              key: '人民币大写',
              value: convert(parseFloat(this.detailData.Content.PayMoney.slice(1)))
            },
            {
              key: '申请支付金额',
              value: this.detailData.Content.PayMoney
            },
            {
              key: '付款方式',
              value: this.detailData.Content.PayMode
            }
          ];
          if(this.detailData.Content.PayMode === '轉賬' ||this.detailData.Content.PayMode === '转账'){
              keyValueData.push({
                key: '开户银行',
                value: this.detailData.Content.PayBank
              });
              keyValueData.push({
                key: '账号',
                value: this.detailData.Content.PayAccount
              });
          }
          keyValueData.push({
              key: '收款事由',
              value: this.detailData.Content.PayReason
          });
          keyValueData.push({
              key: '抄 送 人',
              value: copiersArr.length > 0 ? copiersArr : null
          });
            
          if (this.detailData.Content.ReApplyReason) {
            keyValueData.push({
              key: '重新申请原因',
              value: this.detailData.Content.ReApplyReason
            });
          }
          if (this.detailData.Content.EditApplyReason) {
            keyValueData.push({
              key: '修改申请原因',
              value: this.detailData.Content.EditApplyReason
            });
          }
          if (this.detailData.Content.EditApplyDateReason) {
            keyValueData.push({
              key: '缩短日期原因',
              value: this.detailData.Content.EditApplyDateReason
            });
          }
        }
        let applyStatus = this.detailData.Status;
        // 已駁回
        if (applyStatus === 3) {
          keyValueData.push({
            key: '驳回原因',
            value: this.detailData.TurndownRemark
          });
        }
        keyValueData.unshift({
          key: '申请编号',
          value: this.detailData.ApplyNo
        });
        if(this.detailData.Content.Images){
          this.detailData.Content.Images.forEach((item) => {
            this.previewerImagesList.push({src: item});
          });
        }
        this.applyInfo = keyValueData;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .cellbox-item{
    padding: 0 15px;
    align-items: flex-start;
    position: relative;
    &:before{
      border-color: #e6e6e6;
    }
    .title{
      color: #999;
      font-size: getRem(28);
    }
    .value{
      font-size: getRem(28);
    }
    .vux-flexbox{
      align-items: flex-start;
      padding: getRem(28) 0;
    }
    .file-cell,
    .image-cell{
      padding-bottom: 0;
    }
  }
  .apply-info{
    .header-img{
      display: block;
      width: getRem(120);
      height: getRem(120);
      border: .5px solid #ccc;
      border-radius: 1000px;
    }
    .name{
      margin-top: getRem(10);
      font-size: getRem(32);
    }
    .file-list,
    .img-list{
      list-style: none;
      overflow: hidden;
      /*margin-top: getRem(30);*/
      li{
        float: left;
        margin-right: getRem(20);
        margin-bottom: getRem(28);
      }
      img{
        display: block;
        width: getRem(120);
        height: getRem(120);
        border-radius: getRem(10);
      }
    }
  }
 
</style>
